<template>
	<view>
		<view class="goods-list">
			<view v-for="(goods,index) in goodsList" :key="index" @click="goGoodsDetail(goods)">
				<goods_item :goods="goods" @click="handler"></goods_item>
			</view>
		</view>
	</view>
</template>

<script>
	import {goodsListData} from "@/api/goods_list_request.js";
	export default {
		data() {
			return {
				//git请求参数
				queryObj:{
					query:'',
					cid:'',
					pagenum:1,
					pagesize:10
				},
				//商品列表中的商品
				goodsList:[],
				//商品总条数
				total:0,
				//节流阀
				isLoading:false
			};
		},
		onLoad(options){
			this.queryObj.query = options.query || '';
			this.queryObj.cid = options.cid || '';
			
			this.getGoodsListData();
		},
		methods:{
			handler(){
				console.log('接收一下')
			},
			goGoodsDetail(goods){
				console.log("去详情页面");
				uni.navigateTo({
					url:'/fenbao_one/swiper_detail/swiper_detail?goods_id=' + goods.goods_id
				})
			},
			async getGoodsListData(callback){
				//打开节流阀
				this.isLoading = true;
				
				//数据请求完毕 就调用回调函数 停止下拉刷新
				callback && callback();
				
				//获取数据
				const {data:res} = await goodsListData(this.queryObj);
				
				//关闭节流阀
				this.isLoading = false;
				
				console.log(res);
				if(res.meta.status !== 200) return uni.$showMsg();
				//上拉触底  数据赋值
				this.goodsList = [...this.goodsList,...res.message.goods];
				this.total = res.message.total;
			}
		},
		onReachBottom(){
			// console.log("上拉触底");
			//数据请求完毕告诉用户
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据全部加载完成！')
			
			//判断节流阀的状态
			if(this.isLoading) return;
			
			//页码 +1
			this.queryObj.pagenum += 1;
			
			//重新获取页码加完后的数据
			this.getGoodsListData();
		},
		onPullDownRefresh(){
			console.log("下拉刷新");
			//下拉刷新 要先将上拉触底用到的数据重置   这里的下拉刷新就是重新加载一下，不改变数据
			this.isLoading = false;
			this.goodsList = [];
			this.queryObj.pagenum = 1;
			this.total = 0;
			
			this.getGoodsListData(()=>uni.stopPullDownRefresh());
		}
	}
</script>

<style lang="scss">
.goods-list{
	border-top: 3px solid #C00000;
}
</style>
